<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户中心</title>
    <link rel="stylesheet" type="text/css" href="/bootstrap-3.4.1-dist/css/bootstrap.css">
    <script type="text/javascript" src="/script/jquery.min.1.10.2.js"></script>
    <script type="text/javascript">
        $(function () {

            $('#jichu').click(function () {
                $('#jichuxinxi').toggle(500);
                $(this).children('i').toggleClass('rotate90');
            })
            $('#kaoshi').click(function () {
                $('#kaoshixinxi').toggle(500);
                $(this).children('i').toggleClass('rotate90');
            })
            $('#kaoshi2').click(function () {
                $('#kaoshixinxi2').toggle(500);
                $('#kaoshixinxi3').toggle(500);
                $(this).children('i').toggleClass('rotate90');
            })

            var rObj = $('a[target=rightWindow]');
            rObj.find('div').click(function () {
                function f() {
                    rObj.find('div').css('color', 'black')
                    rObj.find('div').parent().parent().css('background', 'white')
                }

                f();
                $(this).css('color', 'blue');
                $(this).parent().parent().css('background', '#f5f1f1');
            })
        })
    </script>
    <style>

        body {
            margin: 0;
        }


        .d1 {
            background: #0088ff;
            height: 40px;
            color: #dddddd;
            border: 1px solid;
            overflow: hidden;
        }

        .d2 {
            padding-left: 33px;
            margin: 9px auto;
            float: left;
        }

        .d3 {
            float: right;
            position: absolute;
            top: 10px;
            right: 20px;
            display: inline-block;
        }

        .d4 {
            display: inline-block;
            background-color: white;
            border-right: 1px dotted;
            width: 200px;
            height: 654px;
            margin-left: 10px;
            float: left;
        }

        tr {
            border-bottom: 1px solid darkgray;
            height: 50px;
            text-align: center;
        }

        table {
            border-collapse: collapse; /*去掉单元格之间的间隙*/
        }

        a:hover{
            text-decoration: none;
        }

        a {
            text-decoration: none;
            color: black;
        }

        button {
            border: none;
        }


        html, body {
            height: 100%;
        }

        #jichu i {
            font-size: 15px;
            margin-left: 25px;
            transition: transform 0.5s;
        }

        #kaoshi i {
            margin-left: 65px;
            font-size: 15px;
            transition: transform 0.5s;
        }

        #kaoshi2 i {
            margin-left: 65px;
            font-size: 15px;
            transition: transform 0.5s;
        }

        .rotate90 {
            transform: rotate(90deg);
        }
    </style>

</head>
<body>
<!--第一部分-->
<div class="d1">
    <div class="d2"><a style="color: #dddddd" href="/index.html">网上日记本</a></div>
    <div class="tianqi" style="position: absolute;left: 650px;top: 10px">
    </div>
    <div class="d3">欢迎，
        <div class="name" style="display: inline-block" th:text="${session.loginUser.name}">HelloWord</div>
        &nbsp;|&nbsp;
        <span>
            <a style="color: #b40c0c;" href="/user/loginOut">退出登录</a>
        </span>
    </div>
</div>

<!--第二部分-->
<div class="d4">
    <div class="dotted02">
        <!--这里把头像设置为圆角-->
        <div class="logo"><img src="/imgs/logo/0.png"
                               style="width: 25%;margin: 10px auto 10px 40px;border-radius: 10%"
                               alt="图片加载失败！"/>
        </div>
        <div style="margin-left: 50px" class="name" th:text="${session.loginUser.name}">Hello World</div>
        <div style="margin-left: 10px;margin-top: 30px;font-size: 20px;margin-bottom: 2px">

            <div style="margin: 20px auto" id="jichu">
                <span class="glyphicon glyphicon-pencil" style="font-size: 15px"></span>
                <a href="#">
                    网上日记管理
                </a>
                <i class="glyphicon glyphicon-menu-right"></i>
            </div>

        </div>
    </div>
    <div style="margin-top: 10px;" id="jichuxinxi">
        <div style="border: 1px solid white;height: 50px;border-top: 1px dotted;">
            <a href="/diary/diaryDetail" target="rightWindow">
                <div style="margin: 8px auto;position: absolute;left: 40px">日记详情</div>
            </a>
        </div>
        <div style="border: 1px solid white;height: 50px">
            <a href="/group/groupDetail" target="rightWindow">
                <div style="margin: 10px auto;position: absolute;left: 40px">日记分组</div>
            </a>
        </div>
    </div>
    <div style="margin-left: 10px;margin-top: 10px;font-size: 20px;margin-bottom: 2px;">
        <div style="margin: 10px auto" id="kaoshi">
            <span class="glyphicon glyphicon-pawn" style="font-size: 15px"></span>
            <a href="#">
                个人中心
            </a>
            <i class="glyphicon glyphicon-menu-right"></i>
        </div>
    </div>
    <div style="border-top: 1px dotted;" id="kaoshixinxi">
        <div style="margin-top: 10px">
            <div style="border: 1px solid white;height: 50px">
                <a href="/user/userDetail" target="rightWindow">
                    <div style="margin: 8px auto;position: absolute;left: 40px">个人信息管理</div>
                </a>
            </div>
        </div>
    </div>
    <div style="margin-left: 10px;margin-top: 10px;font-size: 20px;margin-bottom: 2px;">
        <div style="margin: 10px auto" id="kaoshi2">
            <span class="glyphicon glyphicon-user" style="font-size: 15px"></span>
            <a href="#">
                注册登录
            </a>
            <i class="glyphicon glyphicon-menu-right"></i>
        </div>
    </div>
    <div style="border-top: 1px dotted;" id="kaoshixinxi2">
        <div style="margin-top: 10px">
            <div style="border: 1px solid white;height: 50px">
                <a href="/regist.html" target="_self">
                    <div style="margin: 8px auto;position: absolute;left: 40px">注册</div>
                </a>
            </div>
        </div>
    </div>
    <div style="" id="kaoshixinxi3">
        <div style="margin-top: 10px">
            <div style="border: 1px solid white;height: 50px">
                <a href="/login.html" target="_self">
                    <div style="margin: 8px auto;position: absolute;left: 40px">登录</div>
                </a>
            </div>
        </div>
    </div>
</div>

<!--第三部分-->

<div class="d5">
    <iframe width="1300px" height="630px" style="position: absolute;right: 0;border: none;"
            name="rightWindow">
    </iframe>
</div>

<!--第四部分-->
<div id="bottom" style="position: absolute;bottom: 20px;left: 650px">
    <span>
        网上日记本.Copyright &copy;2022
    </span>
</div>
</body>
</html>
